import React, { ChangeEvent, useEffect } from 'react';
import { CopyOutlined, PlayCircleOutlined } from '@ant-design/icons';
import { Card, Input, message, Button, Row, Col, Select } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import copy from 'copy-to-clipboard';
import moment from 'moment';

export default (): React.ReactNode => {
  const { Option } = Select;
  const [nowTime, setNowTime] = React.useState('');
  const [nowTimeFormat, setNowTimeFormat] = React.useState('');
  const [timeString, setTimeString] = React.useState('' + new Date().getTime());
  const [timeStringFormat, setTimeStringFormat] = React.useState(
    moment().format('YYYY-MM-DD HH:mm:ss'),
  );
  const [timeFormatValue, setTimeFormatValue] = React.useState('YYYY-MM-DD HH:mm:ss');
  const [nowTimeIntId, setNowTimeIntId] = React.useState(null);
  const [nowTimeButton, setNowTimeButton] = React.useState('停止');

  useEffect(() => {
    if (nowTimeIntId == null) {
      startNowTime();
    }
  });

  const startNowTime = () => {
    setNowTimeIntId(
      setInterval(() => {
        setNowTime('' + new Date().getTime());
        setNowTimeFormat(moment().format('YYYY-MM-DD HH:mm:ss'));
      }, 1000),
    );
  };

  const convertDateToString = (e: ChangeEvent<HTMLInputElement>) => {
    const { value } = e.target;
    try {
      setTimeString(value);
      setTimeStringFormat(moment(parseInt(value)).format(timeFormatValue));
    } catch (e) {
      message.error('格式化转换异常：' + e.toString());
    }
  };

  const convertDateToString2 = (value: string) => {
    try {
      setTimeFormatValue(value);
      setTimeStringFormat(moment(parseInt(timeString)).format(value));
    } catch (e) {
      message.error('格式化转换异常：' + e.toString());
    }
  };

  const convertStringToDate = (e: ChangeEvent<HTMLInputElement>) => {
    const { value } = e.target;
    try {
      setTimeStringFormat(value);
      setTimeString('' + moment(value, timeFormatValue));
    } catch (e) {
      message.error('格式化转换异常：' + e.toString());
    }
  };

  const tingzhi = () => {
    if ('停止' == nowTimeButton) {
      clearInterval(nowTimeIntId);
      setNowTimeButton('开始');
    } else {
      startNowTime();
      setNowTimeButton('停止');
    }
  };

  const copyButtonAfter = (copyType: number) => (
    <Button
      type="primary"
      icon={<CopyOutlined />}
      onClick={() => {
        let copyText = '';
        if (copyType == 2) {
          copyText = nowTimeFormat;
        } else if (copyType == 3) {
          copyText = timeString;
        } else if (copyType == 4) {
          copyText = timeStringFormat;
        }
        if (copy(copyText)) {
          message.info('已成功复制到剪切板');
        } else {
          message.error('复制失败！');
        }
      }}
    >
      复制
    </Button>
  );

  return (
    <PageHeaderWrapper>
      <Card>
        <Row gutter={8}>
          <Col span={12}>
            <Input
              addonBefore="当前时间戳"
              addonAfter={
                <Button type="primary" icon={<PlayCircleOutlined />} onClick={tingzhi}>
                  {nowTimeButton}
                </Button>
              }
              value={nowTime}
            />
          </Col>
          <Col span={12}>
            <Input addonBefore="格式化" addonAfter={copyButtonAfter(2)} value={nowTimeFormat} />
          </Col>
        </Row>
      </Card>
      <Card>
        <Row gutter={8}>
          <Col span={10}>
            <Input
              addonBefore="时间戳"
              addonAfter={copyButtonAfter(3)}
              value={timeString}
              onChange={convertDateToString}
            />
          </Col>
          <Col span={4}>
            <Select
              style={{ width: '100%' }}
              value={timeFormatValue}
              onChange={convertDateToString2}
            >
              <Option value="YYYY-MM-DD HH:mm:ss">yyyy-MM-dd hh:mm:ss</Option>
              <Option value="YYYY-MM-DD HH:mm:ss.SSS">yyyy-MM-dd hh:mm:ss.SSS</Option>
              <Option value="YYYY年MM月DD日HH时mm分ss秒">yyyy年MM月dd日hh时mm分ss秒</Option>
              <Option value="YYYY-MM-DD">yyyy-MM-dd</Option>
              <Option value="YYYY年MM月DD日">yyyy年MM月dd日</Option>
              <Option value="HH:mm:ss">hh:mm:ss</Option>
            </Select>
          </Col>
          <Col span={10}>
            <Input
              addonBefore="格式化"
              addonAfter={copyButtonAfter(4)}
              value={timeStringFormat}
              onChange={convertStringToDate}
            />
          </Col>
        </Row>
      </Card>
    </PageHeaderWrapper>
  );
};
